/*
 * @Author: 何 海深 813936564@qq.com
 * @Date: 2023-03-01 14:44:08
 * @LastEditors: 何 海深 813936564@qq.com
 * @LastEditTime: 2023-12-01 21:40:07
 * @FilePath: \datashowapicture\src\components\self-message\selfMessageIndex.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { MESSAGE_TIMEOUT } from './configData'
import { createVNode, render } from 'vue'
import SMessage from './SelfMessage.vue'

const div = document.createElement('div')
// 添加到body上
document.body.appendChild(div)

// 定时器标识
let timer: any = null

const renderMessage = (vNode: any, timeout: number) => {
  render(null, div) // 清空上一个虚拟dom
  render(vNode, div)
  clearTimeout(timer) // 清理上一个定时器
  timer = setTimeout(() => {
    render(null, div)
  }, timeout)
}

// 根据不同的调用创建虚拟dom
export default {
  error: (text: string, timeout: number = MESSAGE_TIMEOUT) => {
    const vNode = createVNode(SMessage, { type: 'error', text, timeout })
    renderMessage(vNode, timeout)
  },
  warn: (text: string, timeout: number = MESSAGE_TIMEOUT) => {
    const vNode = createVNode(SMessage, { type: 'warn', text, timeout })
    renderMessage(vNode, timeout)
  },
  success: (text: string, timeout: number = MESSAGE_TIMEOUT) => {
    const vNode = createVNode(SMessage, { type: 'success', text, timeout })
    renderMessage(vNode, timeout)
  },
  info: (text: string, timeout: number = MESSAGE_TIMEOUT) => {
    const vNode = createVNode(SMessage, { type: 'info', text, timeout })
    renderMessage(vNode, timeout)
  }
}
